<style scoped>
.header {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 60px;
	font-size: 22px;
	color: #fff;
	display: flex;
}

.collapse-btn {
	/* float: left; */
	padding: 0 21px;
	cursor: pointer;
	line-height: 60px;
}

.header .logo {
	/* float: left; */
	width: 250px;
	line-height: 60px;
}

.header-right {
	/* float: right; */
	padding-right: 50px;
}

.header-user-con {
	display: flex;
	height: 60px;
	align-items: center;
}

.btn-gohome {
	position: relative;
	width: 40px;
	height: 25px;
	text-align: center;
	border-radius: 15px;
	cursor: pointer;
}

.btn-gohome-img {
	width: 20px;
	height: 20px;
}

.btn-bell {
	position: relative;
	width: 30px;
	height: 30px;
	text-align: center;
	border-radius: 15px;
	cursor: pointer;
}

.btn-bell-badge {
	position: absolute;
	right: 0;
	top: -2px;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #f56c6c;
	color: #fff;
}

.btn-bell .el-icon-bell {
	color: #fff;
}

.user-name {
	margin-left: 10px;
}

.user-avator {
	margin-left: 20px;
}

.user-avator img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.el-dropdown-link {
	color: #fff;
	cursor: pointer;
}

.el-dropdown-menu__item {
	text-align: center;
}

.navigate {
	flex: 1;
	height: 60px;
	font-size: 14px;
	line-height: 60px;
}

.nav-title {
	display: inline-block;
	margin-right: 20px;
	cursor: pointer;
	color: #fff;
}
</style>
<style>
.Wyselect .el-input__inner {
	background-color: rgb(0, 0, 0, 0);
	border: none;
	color: rgb(255, 255, 255);
	width: 120px;
}
</style>
<template>
	<div class="header" id="header-block" style="background-color: #021428;">
		<!-- 折叠按钮 -->
		<div class="collapse-btn" @click="collapseChage">
			<el-tooltip effect="dark" :content="collapse?`展开`:`隐藏`" placement="bottom">
				<i class="el-icon-menu"></i>
			</el-tooltip>
		</div>
		<div class="logo" style="width:400px;postion:relative">
			<span style="display:inline-block;margin-left:1px;">远程写卡--管理控制台</span>
		</div>
		<div class="navigate">
			<a
				href="javascript:void(0)"
				v-for="(item,index) in navigate"
				:key="index"
				@click="viewDetail(item.id,index)"
				:class="navActiveIndex == index ? 'nav-title active':'nav-title'"
			>{{item.title}}</a>
		</div>
		<div class="header-right">
			<div class="header-user-con">
				<!-- 主页 -->
				<div class="btn-gohome" @click="goHome">
					<el-tooltip effect="dark" content="首页" placement="bottom">
						<img src="@/assets/image/home.png" alt class="btn-gohome-img" />
					</el-tooltip>
				</div>
				<!-- 全屏显示 -->
				<div class="btn-gohome" @click="handleFullScreen">
					<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
						<img src="@/assets/image/fullscreen.png" alt class="btn-gohome-img" />
						<!-- <i class="el-icon-rank"></i> -->
					</el-tooltip>
				</div>
				<!-- 消息中心 -->
				<!-- <div class="btn-bell">
					<el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
						<router-link to="/tabs">
							<i class="el-icon-bell"></i>
						</router-link>
					</el-tooltip>
					<span class="btn-bell-badge" v-if="message"></span>
				</div> -->
				<!-- 用户头像 -->
				<div class="user-avator">
					<img :src="userHead" />
					<!--	<router-link to="/dashboard"> </router-link> -->
				</div>

				<!-- 用户名下拉菜单 -->
				<el-dropdown class="user-name" trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						{{loginInfo.name}}
						<i class="el-icon-caret-bottom"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<!-- <a href="" target="_blank">
							<el-dropdown-item>关于作者</el-dropdown-item>
						</a>-->
						<el-dropdown-item divided command="updateself">个人信息</el-dropdown-item>
						<el-dropdown-item divided command="updatepassword">修改密码</el-dropdown-item>
						<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			userHead: "static/image/head.png",
			collapse: false,
			fullscreen: false,
			name: "linxin",
			message: 2,
			navActiveIndex: -1,
			// 一级菜单数组数据
			navigate: [],
			loginInfo: {}
		};
	},
	mounted() {
		this.init();
		if (this.loginInfo.userimg != null && this.loginInfo.userimg.length > 0) {
			this.userHead = this.httpRoot.BASEURL_UIM + this.loginInfo.userimg;
		} else {
			this.userHead = "static/image/head.png";
		}
		// this.initLoadMenu();
	},
	inject: ["reload"],
	// computed: {
	// 	...mapGetters([
	// 		'loginInfo'
	// 	])
	// },
	methods: {
		/**
		 * 初始化，获取用户信息
		 */
		init() {
			this.loginInfo = this.$util.getLoginer();
		},
		/**
		 * @augments 一级菜单对应的索引二级菜单的id
		 * 点击一级菜单触发事件，向二级菜单传输一级菜单的id
		 */
		viewDetail(id, index) {
			sessionStorage.setItem("navActiveIndex", index);
			sessionStorage.setItem("secNavId", id);
			this.navActiveIndex = index;
			this.$emit("navChange", id);
		},
		/**
		 * 加载菜单项 modtype:'6'
		 * 加载菜单项 modtype:'6'
		 */
		initLoadMenu() {
			let that = this;
			this.$axios
				.post(
					this.httpRoot.BASEURL_UIM +
						"rest/uim/frame/frmmodel/loadmenus?loginsid=" +
						this.loginInfo.sessionId,
					{
						loginsid: this.loginInfo.sessionId,
						apptype: "20"
					}
				)
				.then(res => {
					if (res.data.result == "true") {
						let rootm = res.data.resultData; //
						//加载菜单内容
						var firstid = "";
						for (var i = 0; i < rootm.children.length; i++) {
							var child = rootm.children[i];
							var m1 = {
								//icon: child.imgname ,
								id: child.id,
								index: child.modcode,
								title: child.modname
							};
							if (i == 0) {
								firstid = child.id;
							}
							//
							this.navigate.push(m1);
						}
						//默认左边显示 firstid
						this.$emit("navChange", firstid);
						let selectedNav = sessionStorage.getItem("navActiveIndex");
						if (selectedNav) {
							this.navActiveIndex = selectedNav;
						} else {
							this.navActiveIndex = 0;
						}
					} else {
						// this.$error("加载失败" +res.data.resultMessage +",错误代码:" +res.data.resultCode);
					}
				})
				.catch(function(error) {
					console.log(error);
				});
		},

		// 用户名下拉菜单选择事件
		handleCommand(command) {
			if (command == "loginout") {
				//退出登录操作
				this.$axios
					.post(this.httpRoot.BASEURL_UIM + "rest/uim/frame/frmuser/logout", {
						loginsid: this.$store.state.user.loginInfo.sessionId
					})
					.then(res => {
						if (res.data.result == "true") {
							this.$store
								.dispatch("removecache")
								.then(() => {
									sessionStorage.clear();
									this.$router.push("/login");
								})
								.catch(error => {
									//this.$error(error);
									sessionStorage.clear();
									this.$router.push("/login");
								});
						} else {
							//this.$error("退出系统失败:" + res.data.resultMessage);
							sessionStorage.clear();
							this.$router.push("/login");
						}
					})
					.catch(error => {
						sessionStorage.clear();
						this.$router.push("/login");
					});
			} else if (command == "updatepassword") {
				this.$store.dispatch("visible/cache_bgWhite", true);
				this.$router.push("/updatePassword");
			} else if (command == "updateself") { 
				this.$store.dispatch("visible/cache_bgWhite", true);
				this.$router.push({
					path: "/amsuserSelf",
					params: {}
				});
			}
		},

		// 侧边栏折叠
		collapseChage() {
			this.collapse = !this.collapse;
			this.bus.$emit("collapse", this.collapse);
		},
		// 全屏事件
		handleFullScreen() {
			let element = document.documentElement;
			if (this.fullscreen) {
				if (document.exitFullscreen) {
					document.exitFullscreen();
				} else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if (document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			} else {
				if (element.requestFullscreen) {
					element.requestFullscreen();
				} else if (element.webkitRequestFullScreen) {
					element.webkitRequestFullScreen();
				} else if (element.mozRequestFullScreen) {
					element.mozRequestFullScreen();
				} else if (element.msRequestFullscreen) {
					// IE11
					element.msRequestFullscreen();
				}
			}
			this.fullscreen = !this.fullscreen;
		},
		goHome() {
			this.$router.push({
				path: "/home",
				params: {}
			});
			setTimeout(()=>{
				this.$store.dispatch("visible/cache_bgWhite", false);
			},150)
		}
	}
};
</script>

